<div *ngIf="config$ | async as config; else loading">
  <div>
    <div class="description">
      <h1 style="margin-bottom: 10px">Deploy Stream Definition {{ config.id }}</h1>
      <p *ngIf="!config.skipper">
        Please specify any <strong>optional</strong> deployment properties.
        You can either enter deployment properties directly into the text-area
        field below or alternatively, you can point to an external properties file,
        which will be used to populate the text-area field. For more information please see the
        <a
          href="http://docs.spring.io/spring-cloud-dataflow/docs/current-SNAPSHOT/reference/htmlsingle/#_passing_application_properties_when_deploying_stream"
          target="_blank">Technical Documentation</a>.
      </p>
      <p *ngIf="config.skipper">
        Please specify any <strong>optional</strong> deployment properties.
        You can either use the builder or alternatively, you can point to an external properties file
        containing the deployment properties. For more information please see the
        <a
          href="http://docs.spring.io/spring-cloud-dataflow/docs/current-SNAPSHOT/reference/htmlsingle/#_passing_application_properties_when_deploying_stream"
          target="_blank">Technical Documentation</a>.
      </p>
    </div>
  </div>
  <div class="tab-simple">
    <ul class="nav nav-tabs">
      <li [class.active]="state.view == 'builder'"><a (click)="state.view = 'builder'">Builder</a></li>
      <li [class.active]="state.view == 'freetext'"><a (click)="state.view = 'freetext'">Freetext</a></li>
    </ul>
    <div class="tab-pane">
      <div *ngIf="state.view == 'builder'">
        <app-stream-deploy-builder [properties]="properties" [skipper]="config.skipper" [id]="config.id"
                                   (exportProperties)="runExport($event)" (update)="update($event)"
                                   (deploy)="runDeploy($event)">
        </app-stream-deploy-builder>
      </div>
      <div *ngIf="state.view == 'freetext'">
        <app-stream-deploy-free-text [properties]="properties" (update)="update($event)" [id]="config.id"
                                     (exportProperties)="runExport($event)" (update)="update($event)"
                                     (deploy)="runDeploy($event)">
        </app-stream-deploy-free-text>
      </div>
    </div>
  </div>
</div>

<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
